Page({

  /**
   * 页面的初始数据
   */
  data: {
    'buluOn': '/assets/images/demo/on.gif',
    'buluOff': '/assets/images/demo/off.gif',
    'images': [
      false, false, false, false, false,
    ],
    'switch': false,
    'progress': 100,
    // 多放一个冗余数据, 修复 color 可能为 undefined 的问题
    'colors': ['green', 'green', 'green', 'yellow', 'yellow', 'red'],
    'color': 'green'
  },
  onLoad() {
    console.log(getApp());
    // 加载页面时更新下 进度条
    this.updateProgress()
  },
  onTap(e: WechatMiniprogram.ControlTap) {
    // 灯泡 点击事件
    const images = this.data.images
    // 点击哪个灯泡就为其绑定的变量取反
    images[e.target.dataset.id] = !images[e.target.dataset.id]
    // 重新设置变量
    this.setData({
      // 更新 images
      images: images,
      // 更新 switch 情况, 只要有一个 灯泡 没有点亮, switch 就为 false
      switch: images.every(it => it == true)
    })
    // 更新 进度条
    this.updateProgress()
  },
  onSwitch(e: WechatMiniprogram.SwitchChange) {
    // switch 点击事件
    const images = this.data.images
    // 为 images 填充为 switch 的值, 全亮 或 全灭
    images.fill(e.detail.value)
    // 更新 images
    this.setData({
      images: images
    })
    // 更新 进度条
    this.updateProgress()
  },
  updateProgress() {
    // 更新进度条
    const images = this.data.images
    // 统计 images 中点亮的灯泡个数, 点亮一个进度条 +20
    const progress = images.reduce((prev, curr) => curr ? prev + 20 : prev, 0)
    // 根据 灯泡点亮个数获取 color
    const color = this.data.colors[progress / 20]
    // 更新数据
    this.setData({
      // 更新 进度条
      progress: progress,
      // 更新 进度条颜色
      color: color
    })
  }

})